<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2016/8/16
  Time: 10:31
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>my articles</title>
    <link href="${ctx}/static/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="${ctx}/static/custom/css/main.css" rel="stylesheet"/>
</head>
<body>
    <div class="container">
        <table class="table">
            <thead>
                <tr>
                    <td style="width:20%">Title</td>
                    <td style="width:60%">Content</td>
                    <td style="width:20%">Action</td>
                </tr>
            </thead>
            <tbody>
                <c:forEach var="article" items="${articles}">
                    <tr id="${article.id}">
                        <td style="width:20%">${article.title}</td>
                        <td style="width:60%;overflow: hidden">${article.content}</td>
                        <td style="width:20%">
                            <button class="btn btn-info" onclick="update('${article.id}', '${article.title}', '${article.html}')"><span class="glyphicon glyphicon-pencil"></span>Update</button>
                            <button class="btn btn-warning" onclick="del('${article.id}')"><span class="glyphicon glyphicon-trash"></span>Delete</button>
                        </td>
                    </tr>
                </c:forEach>
            </tbody>
        </table>
    </div>
    <script type="text/javascript" src="${ctx}/static/jquery/dist/jquery.min.js"></script>
    <script type="text/javascript" src="${ctx}/static/bootstrap/dist/js/bootstrap.min.js"></script>
    <script type="text/javascript">
        function update(id, title, html){

        }

        function del(id){
            $.ajax({
                type:"POST",
                url: "${ctx}/article/delete",
                data: {id: id},
                success: function(res){
                    if(res == "success"){
                        $("#"+id).remove();
                    }
                }
            });
        }
    </script>
</body>
</html>
